<template>
  <div @mouseleave="hoverboxHide">
    <div class="container">
      <ul class="header-tabs-ul" mode="horizontal">
        <li class="my_text_center header-tabs-li" v-for="(item,i) in headerTabs" :key="i" @mouseenter="hoverboxShow(i)" @click="clickItemFuc(i,item.url)" :class="tabsIndex==i?'active':''">
          <span class="header-tabs-li-text">{{item.title}}</span>
          <img v-if="i==1 || i==2 || i==3 || i==4" class="img-bg" :src="img_data" alt="">
        </li>
      </ul>
    </div>
    <tabs-hover-section v-show="isShowHoverBox" @chooseLotteryFuc="changeLotteryIDFuc"></tabs-hover-section>
  </div>
</template>
<script>
import TabsHoverSection from "../components/TabsHoverSection";


export default {
  props: {
    headerTabs: {
      type: Array
    }
  },
  components: {
    TabsHoverSection
  },
  data() {
    return {
      isShowHoverBox: false,
      receiveLotteryIDVar: null,
      tabsIndex: null,
      hoverTabsIndex:null,
      tabsIndexM:null,
      img_data: require('../assets/imgs/layout/xiajiantou.png')
    };
  },
  watch:{
    $route(){
      this.Headertabschange();
      this.tabsIndex = this.tabsIndexM;
    }
  },
  mounted(){
    this.tabsIndex = sessionStorage.getItem('tabsIndex');
  },
  methods: {
    Headertabschange(){
      if (this.$route.path.indexOf("/lotterylobby") == 0) {
        this.tabsIndexM = 1;
      } else if (this.$route.path.indexOf("/forecastrecommend") == 0) {
        this.tabsIndexM = 2;
      } else if (this.$route.path.indexOf("/charts") == 0) {
        this.tabsIndexM = 3;
      } else if (this.$route.path.indexOf("/live") == 0) {
        this.tabsIndexM = 4;
      } else if (this.$route.path.indexOf("/downloadCenter") == 0) {
        this.tabsIndexM = 5;
      }else if (this.$route.path.indexOf("/news") == 0) {
        this.tabsIndexM = 6;
      }else if (this.$route.path.indexOf("/helpCenter") == 0) {
        this.tabsIndexM = 7;
      }else if (this.$route.path.indexOf("/") == 0) {
        this.tabsIndexM = 0;
      }
    },
    //鼠标划入
    hoverboxShow(i) {
      if (i == 1 || i == 2 || i == 3 || i == 4) {
        this.isShowHoverBox = true;
        this.hoverTabsIndex = i;
      } else {
        this.isShowHoverBox = false;
      }
    },

    //鼠标划出
    hoverboxHide() {
      this.isShowHoverBox = false;
    },

    //跳转页面
    changeLotteryIDFuc(data) {
      this.receiveLotteryIDVar = data;
      switch (this.hoverTabsIndex) {
        case 1:
          this.$router.push(`/lotterylobby/${this.receiveLotteryIDVar}`);
          break;
        case 2:
          this.$router.push(`/forecastrecommend/${this.receiveLotteryIDVar}`);
          break;
        case 3:
          this.$router.push(`/charts/${this.receiveLotteryIDVar}`);
          break;
        case 4:
          this.$router.push(`/live/${this.receiveLotteryIDVar}`);
          break;
        default:
          break;
      }
      this.tabsIndex = this.hoverTabsIndex;
      sessionStorage.setItem('tabsIndex',this.hoverTabsIndex);
    },
    clickItemFuc(i,url) {
      this.$store.commit("getLotteryType",'ssc'); 
      this.tabsIndex = i;
      this.$router.push(url);
      sessionStorage.setItem('tabsIndex',i);
    }
  }
};
</script>
<style lang="less" scoped>
.img-bg{
  width:20px;
  height:20px;
  line-height: 46px;
  margin-bottom: -5px;
  margin-left: -5px;
}
</style>





